<template>
  <div class="container">
    <div>
      <div id="main" style="width: 100%;height:500px;"></div>
    </div>
    <div class="list">
      <vxe-toolbar>
        <template #buttons>
          <vxe-input style="float: right;" v-model.trim.lazy="filterName" type="search" placeholder="快捷检索" @keyup="searchEvent"></vxe-input>
        </template>
      </vxe-toolbar>
      <vxe-table resizable ref="XTable" show-overflow border max-height="800" stripe highlight-hover-row highlight-current-row
        :loading="loading" :data="dataList" @sort-change="sortChange">
        <vxe-table-column field="sportName" title="运动项目" sortable></vxe-table-column>
        <vxe-table-column field="coachNum" title="教练总数" sortable></vxe-table-column>
        <vxe-table-column field="playerNum" title="运动员总数" sortable></vxe-table-column>
      </vxe-table>
      <vxe-pager :loading="loading" :current-page="page.currentPage" :page-size="page.pageSize" :total="page.totalResult"
        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange">
      </vxe-pager>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import {
    statistics_sportBar,statistics_baseInfo
  } from '@/api/statistics.js'
  export default {
    data() {
      return {
        option: {},
        myChart: '',
        sportBar: [],
        defaultDataList: [],
        dataList: [],
        page: {
          currentPage: 1,
          pageSize: 10,
          totalResult: 0
        },
        loading: false,
        filterName: '',
        searchProps: []
      }
    },
    created() {
      this.getSportBar()
      this.getBaseInfo()
    },
    methods: {
      getBaseInfo() {
        statistics_baseInfo().then(res=>{
          if(res.code === 200){
            this.defaultDataList = res.data
            this.searchProps = Object.keys(res.data[0])
          }else{
            this.defaultDataList = []
          }
        }).then(()=>{
          this.findList()
        })
      },
      getSportBar() {
        statistics_sportBar().then(res => {
          if (res.code === 200) {
            this.sportBar = res.data
          }else{
            this.sportBar = []
          }
        }).then(()=>{
          this.init_echarts()
        })
      },
      init_echarts() {
        let legendData = ['教练员', '运动员']
        let xdata = this.sportBar.name
        let ydata = [{
          name: '教练员',
          type: 'bar',
          data: this.sportBar.coachNum,
          label: {
            normal: {
              show: true,
              position: 'top',
            },
          },
          itemStyle: {
            normal: {
              show: true,
              position: 'top',
              color: "#820000",
            },
          },
        }, {
          name: '运动员',
          type: 'bar',
          data: this.sportBar.playerNum,
          label: {
            normal: {
              show: true,
              position: 'top',
            },
          },
          itemStyle: {
            normal: {
              show: true,
              position: 'top',
              color: "#383838",
            },
          },
        }]
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
          title: {
            text: '各运动项目在训规模统计'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          legend: {
            data: legendData
          },
          xAxis: {
            type: 'category',
            data: xdata,
            axisLabel: {
              interval: 0,
              rotate: 40
            },
          },
          yAxis: [{
            type: 'value'
          }],
          series: ydata
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        setTimeout(function (){
        	    window.onresize = function () {
        	    	myChart.resize();
        	    }
        	},200)
      },
      searchEvent() {
        const filterName = this.$XEUtils.toValueString(this.filterName).trim().toLowerCase()
        if (filterName) {
          const filterRE = new RegExp(filterName, 'gi')
          const searchProps = this.searchProps
          const rest = this.defaultDataList.filter(item => searchProps.some(key => this.$XEUtils.toValueString(item[
            key]).toLowerCase().indexOf(filterName) > -1))
          this.dataList = rest.map(row => {
            const item = Object.assign({}, row)
            searchProps.forEach(key => {
              item[key] = this.$XEUtils.toValueString(item[key]).replace(filterRE, match => match)
            })
            return item
          })
        } else {
          this.dataList = this.defaultDataList
          this.findList()
        }
      },
      handlePageChange({
        currentPage,
        pageSize
      }) {
        this.page.currentPage = currentPage
        this.page.pageSize = pageSize
        this.findList()
      },
      sortChange() {
        this.page.pageSize = this.defaultDataList.length
        this.findList()
      },
      findList() {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.page.totalResult = this.defaultDataList.length
          this.dataList = this.defaultDataList.slice((this.page.currentPage - 1) * this.page
            .pageSize, this.page.currentPage * this.page.pageSize)
        }, 300)
      },
    }

  }
</script>

<style lang="scss" scoped>
.container{
  padding: 10px;
  background-color: #FFFFFF;
}
</style>
